<template>
  <div class="reduction-amount-container">
    <!-- Header / Search Area -->
    <div class="search-panel">
      <div class="search-row">
        <div class="search-item time-selection">
          <span class="label">时间</span>
          <el-date-picker
            v-model="searchParams.startTime"
            type="datetime"
            placeholder="开始日期时间"
            class="custom-date-picker"
            size="small"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <span class="time-separator">至</span>
          <el-date-picker
            v-model="searchParams.endTime"
            type="datetime"
            placeholder="结束日期时间"
            class="custom-date-picker"
            size="small"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <div class="search-item">
          <span class="label">产线</span>
          <el-select v-model="searchParams.prodLine" placeholder="请选择" clearable size="small" class="custom-select" style="width: 90px;">
             <el-option label="产线A" value="A" />
             <el-option label="产线B" value="B" />
          </el-select>
        </div>
        <div class="search-item">
          <span class="label">热卷号</span>
          <el-input v-model="searchParams.hotRollNo" placeholder="请输入" size="small" class="custom-input" style="width: 120px;"/>
        </div>
         <div class="search-item">
          <span class="label">钢牌号</span>
          <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable size="small" class="custom-select" style="width: 90px;">
             <el-option label="SPHC" value="SPHC" />
             <el-option label="SPHD" value="SPHD" />
          </el-select>
        </div>
         <div class="search-actions">
          <button class="btn query-btn" @click="handleSearch">查询</button>
          <button class="btn reset-btn" @click="handleReset">重置</button>
        </div>
      </div>
      <div class="search-row">
         <div class="search-item">
          <span class="label">厚度</span>
           <el-input v-model="searchParams.thickness" placeholder="请输入" size="small" class="custom-input" style="width: 80px;"/>
        </div>
         <div class="search-item">
          <span class="label">宽度</span>
           <el-input v-model="searchParams.width" placeholder="请输入" size="small" class="custom-input" style="width: 80px;"/>
        </div>
         <div class="search-item">
          <span class="label">冷轧原料库</span>
           <el-select v-model="searchParams.coldRollStock" placeholder="请选择" clearable size="small" class="custom-select" style="width: 110px;">
              <el-option label="库A" value="A" />
              <el-option label="库B" value="B" />
           </el-select>
        </div>
         <div class="search-item">
          <span class="label">入冷轧原料库</span>
           <el-select v-model="searchParams.entryColdRollStock" placeholder="请选择" clearable size="small" class="custom-select" style="width: 110px;">
              <el-option label="是" value="Y" />
              <el-option label="否" value="N" />
           </el-select>
        </div>
         <div class="search-item">
          <span class="label">异常筛选</span>
           <el-select v-model="searchParams.abnormalFilter" placeholder="请选择" clearable size="small" class="custom-select" style="width: 110px;">
              <el-option label="是" value="Y" />
              <el-option label="否" value="N" />
           </el-select>
        </div>
      </div>
    </div>

    <!-- Warning Banner -->
    <div class="warning-banner">
      原料质量差:建议加强筛查
    </div>

    <!-- Table Area -->
    <div class="table-panel">
      <el-table
        :data="pagedTableData"
        style="width: 100%;"
        height="100%"
        border
        highlight-current-row
        size="small"
        :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '4px 8px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
        :cell-style="{ padding: '4px 8px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
        :row-style="{ background: '#0f2142' }"
      >
        <el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod" fixed="left" />
        <el-table-column prop="hotRollNo" label="热卷号" width="110" />
        <el-table-column prop="widthDevStd" label="宽度偏差标准差" width="110" />
        <el-table-column prop="widthDevAvg" label="宽度偏差均值[mm]" width="130" />
        <el-table-column prop="widthDevMax" label="宽度偏差最大值[m]" width="130" />
        <el-table-column prop="widthDevMin" label="宽度偏差最小值[m]" width="130" />
        <el-table-column prop="widthDevStd2" label="宽度偏差标准差" width="110" /> 
        <el-table-column prop="finishTempHead" label="终轧温度头部温度[°C]" width="150" />
        <el-table-column prop="finishTempTail" label="终轧温度尾部温度[°C]" width="150" />
        <el-table-column prop="coolingTempHead" label="层冷温度头部温度[°C]" width="150" />
        <el-table-column prop="coolingTempTail" label="层冷温度尾部温度[°C]" width="150" />
        <el-table-column prop="headThickness" label="头部厚度[mm]" width="110" />
        <el-table-column prop="tailThickness" label="尾部厚度[mm]" width="110" />
        <el-table-column prop="headWidth" label="头部宽度[mm]" width="110" />
        <el-table-column prop="tailWidth" label="尾部宽度[mm]" width="110" />
        <el-table-column prop="hotRollAvgThickness" label="热轧厚度平均值[mm]" width="140" />
        <el-table-column label="操作" width="120" fixed="right" align="center">
           <template #default="scope">
             <button class="action-btn detail-btn">详情</button>
             <button class="action-btn trace-btn">追溯</button>
           </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- Pagination Area -->
    <div class="pagination-panel">
        <el-pagination
           v-model:current-page="pagination.currentPage"
           v-model:page-size="pagination.pageSize"
           :page-sizes="[10, 20, 30, 50]"
           layout="total, sizes, prev, pager, next, jumper"
           :total="pagination.total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           background
           small
         />
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

// --- Interfaces --- 
interface SearchParams {
  startTime: string | null;
  endTime: string | null;
  prodLine: string;
  hotRollNo: string;
  steelGrade: string;
  thickness: string;
  width: string;
  coldRollStock: string;
  entryColdRollStock: string;
  abnormalFilter: string;
}

interface TableRow {
  id: number;
  hotRollNo: string;
  widthDevStd: number | string; // Can be number or string like '04', '11'
  widthDevAvg: number;
  widthDevMax: number;
  widthDevMin: number;
  widthDevStd2: number;
  finishTempHead: number;
  finishTempTail: number;
  coolingTempHead: number;
  coolingTempTail: number;
  headThickness: number;
  tailThickness: number;
  headWidth: number;
  tailWidth: number;
  hotRollAvgThickness: number;
}

// --- Reactive State --- 
const searchParams = reactive<SearchParams>({
  startTime: '2025-03-05 23:06:20', // Default from image
  endTime: '2025-03-20 23:06:20',   // Default from image
  prodLine: '',
  hotRollNo: '',
  steelGrade: '',
  thickness: '',
  width: '',
  coldRollStock: '',
  entryColdRollStock: '',
  abnormalFilter: ''
});

// --- Mock Table Data --- 
const allTableData = ref<TableRow[]>(Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  hotRollNo: `2251935${String(800 + i).padStart(3, '0')}`,
  widthDevStd: i % 4 === 0 ? '04' : (i % 3 == 1 ? '11' : '57'), // Mix strings and numbers if needed
  widthDevAvg: parseFloat((17.22 + Math.random() * 10).toFixed(2)),
  widthDevMax: parseFloat((20.82 + Math.random() * 15).toFixed(2)),
  widthDevMin: parseFloat((15.20 + Math.random() * 5).toFixed(2)),
  widthDevStd2: parseFloat((1.81 + Math.random() * 2).toFixed(2)),
  finishTempHead: 800 + Math.floor(Math.random() * 100),
  finishTempTail: 300 + Math.floor(Math.random() * 600),
  coolingTempHead: 600 + Math.floor(Math.random() * 150),
  coolingTempTail: 350 + Math.floor(Math.random() * 350),
  headThickness: parseFloat((4.539 - Math.random()).toFixed(3)),
  tailThickness: parseFloat((4.491 - Math.random()).toFixed(3)),
  headWidth: 1270 + Math.floor(Math.random() * 30),
  tailWidth: 1250 + Math.floor(Math.random() * 20),
  hotRollAvgThickness: parseFloat((4.503 + Math.random() * 0.1).toFixed(3)),
})));

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 12, // Adjust based on image visible rows
  total: allTableData.value.length
});

const pagedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return allTableData.value.slice(start, end);
});

const indexMethod = (index: number) => {
  return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
};

const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
};

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Add search logic here
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof SearchParams;
    if (typedKey === 'startTime' || typedKey === 'endTime') {
      searchParams[typedKey] = null;
    } else {
      searchParams[typedKey] = '';
    }
  });
  console.log('重置参数');
  // Add reset logic here
};

</script>

<style scoped>
.reduction-amount-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Search Panel */
.search-panel {
  background-color: #1c2d5a; 
  padding: 10px 15px;
  border-radius: 3px;
  margin-bottom: 10px; /* Reduced margin */
  flex-shrink: 0;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px; /* Spacing between rows */
}
.search-row:last-child {
  margin-bottom: 0;
}

.search-item {
  display: flex;
  align-items: center;
  margin-right: 10px; /* Reduced gap between items */
  margin-bottom: 8px; /* Spacing for wrapped items */
}

.search-item .label {
  margin-right: 5px;
  white-space: nowrap;
  font-size: 12px;
  min-width: 80px; /* Ensure labels align */
  text-align: right;
}
.time-selection .label { min-width: auto; }

.time-separator {
  margin: 0 5px;
}

:deep(.custom-date-picker.el-date-editor) {
  width: 180px !important; /* Slightly narrower for datetime */
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
/* ... consistent date picker styles ... */
:deep(.custom-date-picker .el-input__wrapper) { padding-right: 5px; }
:deep(.custom-date-picker .el-input__inner) { color: #c0c4cc; font-size: 12px; height: 26px; line-height: 26px;}
:deep(.custom-date-picker .el-input__prefix) { left: 5px; }
:deep(.custom-date-picker .el-input__icon) { line-height: 28px; font-size: 12px; color: #c0c4cc; }
:deep(.custom-date-picker .el-input__suffix) { right: 5px;}

.custom-input,
.custom-select,
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) { 
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
:deep(.el-input__inner) { color: #c0c4cc !important; height: 26px !important; line-height: 26px !important; }
:deep(.custom-select .el-select__placeholder), 
:deep(.custom-select .el-select__caret) { color: #c0c4cc; }

.search-actions {
  display: flex;
  align-items: center;
  margin-left: auto; /* Push buttons to the right */
}

.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  color: #fff;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }
.reset-btn { background-color: #3a5a8a; }
.reset-btn:hover { background-color: #5a7aa4; }

/* Warning Banner */
.warning-banner {
  background-color: #ff4d4f; /* Red background */
  color: #fff;
  padding: 5px 15px;
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

/* Table Panel */
.table-panel {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  background-color: #1c2d5a;
  padding: 5px;
  border-radius: 3px;
  display: flex;
}

/* Action Buttons in Table */
.action-btn {
  padding: 2px 6px; /* Smaller padding */
  font-size: 11px; /* Smaller font */
  border: none;
  border-radius: 3px;
  margin: 0 2px; 
  cursor: pointer;
  color: #fff;
}
.detail-btn { background-color: #e6a23c; } /* Yellow */
.detail-btn:hover { background-color: #ebb563; }
.trace-btn { background-color: #67c23a; } /* Green */
.trace-btn:hover { background-color: #85ce61; }

/* Pagination Panel */
.pagination-panel {
  background-color: #1c2d5a;
  padding: 5px 15px;
  border-radius: 3px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin-top: 10px;
}
/* Consistent deep pagination styles */
:deep(.el-pagination button), :deep(.el-pager li) { min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; font-size: 12px; }
:deep(.el-pagination__jump .el-input__wrapper) { height: 22px; line-height: 22px; width: 35px; font-size: 12px; }
:deep(.el-pagination__jump .el-input__inner) { height: 20px !important; line-height: 20px !important; }
:deep(.el-pagination__sizes .el-select .el-input__wrapper) { height: 22px; line-height: 22px; font-size: 12px !important; width: 80px; }
:deep(.el-pagination__sizes .el-select .el-input__inner) { height: 20px !important; line-height: 20px !important; }

/* Consistent deep table styles */
:deep(.el-table) { background-color: transparent; --el-table-border-color: #3a5a8a; --el-table-header-bg-color: #2a5caa; --el-table-header-text-color: #fff; --el-table-tr-bg-color: #0f2142; --el-table-row-hover-bg-color: #183153; --el-table-text-color: #c0c4cc; --el-table-border: none; }
:deep(.el-table th.el-table__cell) { background-color: var(--el-table-header-bg-color) !important; color: var(--el-table-header-text-color); padding: 4px 8px !important; font-weight: normal; text-align: center; border-color: #3a5a8a !important; }
:deep(.el-table td.el-table__cell) { padding: 4px 8px !important; text-align: center; border-color: #3a5a8a !important; color: var(--el-table-text-color); background-color: var(--el-table-tr-bg-color) !important; }
:deep(.el-table--border .el-table__cell) { border-right: 1px solid #3a5a8a; }
:deep(.el-table--border th.el-table__cell) { border-bottom: 1px solid #3a5a8a; }
:deep(.el-table__body-wrapper) { scrollbar-width: thin; scrollbar-color: #3a5a8a #142a52; }
:deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 6px; height: 6px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) { background: #142a52; border-radius: 3px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) { background-color: #3a5a8a; border-radius: 3px; }
:deep(.el-table__cell.el-table-column--fixed-right) { background-color: #0f2142 !important; } 
:deep(.el-table__header-wrapper th.el-table-column--fixed-right) { background-color: #2a5caa !important; }
:deep(.el-table__body tr.current-row > td.el-table-column--fixed-right) { background-color: #263451 !important; }

</style>
